<template>
  <div class="inhand">

    <el-row style="padding: .2rem .2rem" :gutter="10">
      <el-col :span="3">
        <el-date-picker
          style="width: 100%;"
          v-model="time"
          @change="chooseTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>

      <el-col :span="4">
        <el-select style="width: 100%;" clearable v-model="serialNumber "
                   @change="pageNum = 1;currentPage = 1;getPage()" placeholder="请选择档案号">
          <el-option
            v-for="item in numberList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="level" clearable @change="pageNum = 1;currentPage = 1;getPage()" placeholder="请选择保护级别">
          <el-option label="国家一级" value="国家一级"></el-option>
          <el-option label="国家二级" value="国家二级"></el-option>
          <el-option label="北京市一级" value="北京市一级"></el-option>
          <el-option label="北京市二级" value="北京市二级"></el-option>
          <el-option label="'三有'动物" value="'三有'动物"></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-input placeholder="搜索动物名称" v-model="keyword" class="input-with-select">
          <el-button @click="pageNum = 1;currentPage = 1;getPage()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <table>
      <thead>
      <th>档案号</th>
      <th>接收时间</th>
      <th>完成时间</th>
      <th>动物名称</th>
      <th>保护级别</th>
      <th>健康状态</th>
      <th>当前进度</th>
      <th>操作</th>
      </thead>

      <tbody>
      <tr v-for="item in pageList">
        <td>{{item.serialNumber}}</td>
        <td>{{item.insertDate|cDate}}</td>
        <td>{{item.updateTime|cDate}}</td>
        <td>{{item.animalName}}</td>
        <td>{{item.protectionLevel}}</td>
        <td class="wzd">{{item.monitoringStatus}}</td>
        <td>未完成</td>
        <td>
          <span class="czs" @click="openform(1,item)">详情</span>
          <!--<span class="czs" @click="openform(2,item)">修改</span>-->
          <span class="czs" style="color: red" @click="shanchu(item)">删除</span>
        </td>
      </tr>
      </tbody>
    </table>


    <!--分页 B-->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>
    <!--分页 E-->


    <!--详情 B-->
    <div class="formBox" v-if="isform">
      <div class="xqtitle">
        <div style="font-size: .16rem;font-weight: 700;">
          <span>救助详情</span>
        </div>

        <el-button @click="isform = false" size="small" style="background: #01C144;color: white">
          返回
        </el-button>
      </div>

      <!--版心 B-->
      <div class="banxin" style="width: 50%;">
        <div class="zdytitle">
          <span>救助动物信息</span>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>动物名称：</span></div>
          <div style="flex: 9"><span>{{xqobj.animalName}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>保护级别：</span></div>
          <div style="flex: 9"><span>{{xqobj.protectionLevel}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>健康状态：</span></div>
          <div style="flex: 9"><span>{{xqobj.monitoringStatus}}</span></div>
        </div>

        <!--动物照片-->
        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>动物照片：</span></div>
          <div style="flex: 9"><span></span></div>
        </div>

        <div class="animal clearfix">
          <div class="previewbox" v-for="(i,index) in xqobj.animalPhotos">

            <div class="deleted">
              <span class="el-icon-zoom-in" @click="isBigImg = true,bigImgUrl = i.imageUrl"
                    style="color: red;font-size: .3rem;"></span>
            </div>
            <img :src="i.imageUrl" alt="">
          </div>
        </div>
        <!--动物照片-->

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>救助位置：</span></div>
          <div style="flex: 9"><span>{{xqobj.lon}},{{xqobj.lat}}</span></div>
        </div>


        <div class="mapbox" id="container"></div>

        <div class="zdytitle">
          <span>热心市民信息</span>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>救助人姓名：</span></div>
          <div style="flex: 8"><span>{{xqobj.name}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>救助人电话：</span></div>
          <div style="flex: 8"><span>{{xqobj.contact}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>地址/单位：</span></div>
          <div style="flex: 8"><span>{{xqobj.address}}</span></div>
        </div>

        <!--市民照片-->
        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>市民照片：</span></div>
          <div style="flex: 9"><span></span></div>
        </div>

        <div class="animal clearfix">
          <div class="previewbox" v-for="(i,index) in xqobj.citizenPhotos">

            <div class="deleted">
              <span class="el-icon-zoom-in" @click="isBigImg = true,bigImgUrl = i.imageUrl"
                    style="color: red;font-size: .3rem;"></span>
            </div>
            <img :src="i.imageUrl" alt="">
          </div>
        </div>
        <!--市民照片-->

        <div class="zdytitle">
          <span>救护信息</span>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>接收人员：</span></div>
          <div style="flex: 9"><span>{{xqobj.receiver}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>救护方式：</span></div>
          <div style="flex: 9"><span>{{xqobj.rescueMode}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>收容救护过程：</span></div>
          <div style="flex: 8"><span>{{xqobj.rescueProcess}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>恢复饲养过程：</span></div>
          <div style="flex: 8"><span>{{xqobj.recoveryProcedure}}</span></div>
        </div>

        <div class="zdytitle">
          <span>处理信息</span>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>处理建议：</span></div>
          <div style="flex: 9"><span>{{xqobj.suggest}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>确认意见：</span></div>
          <div style="flex: 9"><span>{{xqobj.estimate}}</span></div>
        </div>

        <div class="wbtxt">
          <div style="flex: 2;text-align-last: justify;"><span>处理过程及结果：</span></div>
          <div style="flex: 8"><span>{{xqobj.disposeResult}}</span></div>
        </div>

        <!--处理过程及结果照片-->
        <div class="wbtxt">
          <div style="flex: 1;text-align-last: justify;"><span>市民照片：</span></div>
          <div style="flex: 9"><span></span></div>
        </div>

        <div class="animal clearfix">
          <div class="previewbox" v-for="(i,index) in xqobj.disposePhotos">

            <div class="deleted">
              <span class="el-icon-zoom-in" @click="isBigImg = true,bigImgUrl = i.imageUrl"
                    style="color: red;font-size: .3rem;"></span>
            </div>
            <img :src="i.imageUrl" alt="">
          </div>
        </div>
        <!--处理过程及结果照片-->

        <div class="zdytitle">
          <span>其他信息</span>
        </div>

        <div
          style="width: 100%;height: 5rem;margin-top: .1rem;display: flex;align-items: center;justify-content: center">
          <img style="max-height: 100%;max-width: 100%" :src="Specimen.fileUrl" alt="">
        </div>

        <div class="ldwz">
          <span style="flex: 1;text-align-last: justify;">动物名称：</span>
          <span style="flex: 9">{{Specimen.animalName}}</span>
        </div>
        <div class="ldwz">
          <span style="flex: 1;text-align-last: justify;">动物描述：</span>
          <span style="flex: 9">{{Specimen.description}}</span>
        </div>

        <div class="ldwz">
          <span style="flex: 1;text-align-last: justify;">分布范围：</span>
          <span style="flex: 9">{{Specimen.distributionRange}}</span>
        </div>

        <div class="ldwz">
          <span style="flex: 1;text-align-last: justify;">分布状况：</span>
          <span style="flex: 9">{{Specimen.distributionStatus}}</span>
        </div>
        <div class="ldwz">
          <span style="flex: 1;text-align-last: justify;">动物习性：</span>
          <span style="flex: 9">{{Specimen.characteristic}}</span>
        </div>

      </div>
      <!--版心 E-->
      <div style="text-align: right;margin-top: .3rem;background-color: #F3FFF7;padding: .1rem 0">
        <div style="width: 50%;margin: 0 auto">
          <el-button type="primary" style="position: relative">
            <a
              :href="'/api/rescue/downloadWord?id='+ xqobj.id"
              style="display:inline-block;width: 100%;height: 100%; cursor: pointer;position: absolute;top: 0;left: 0;z-index:2;opacity: 0;"></a>
            导出
          </el-button>
          <!--<el-button style="margin-right: .2rem;">编辑</el-button>-->
          <!--<el-button type="primary">导出</el-button>-->
          <!--<el-button @click="helpover" style="margin: 0 2rem 0 1rem">完成救助</el-button>-->
        </div>

      </div>

      <!--查看大图-->
      <div class="bigImg" v-if="isBigImg">
        <div class="clbm"><img @click="isBigImg = false" src="/static/images/icon/close.png" alt=""></div>

        <div style="width: 80%;height: 100%;">
          <img style="width: 100%;height: 90%;margin-top: 5%;" :src="bigImgUrl" alt="">
        </div>
      </div>
      <!--查看大图-->
    </div>
    <!--详情 E-->


  </div>
</template>

<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import AMap from "AMap";

  export default {
    name: "inhand",
    data() {
      return {
        isform: false,
        level: "",
        keyword: "",
        pageNum: 1,
        pageList: [],
        totalElements: 0,
        numberList: [],
        serialNumber: "",
        address: "",
        addressList: [],
        keywords: '',
        previewList: [],
        citizenPhoto: [],
        jiuzhuguocheng: [],
        time: "",
        options: [],
        value: '',
        currentPage: 1,
        map: null,
        marker: null,
        areaId: '',
        startDate: "",
        endDate: "",
        Specimen: {
          fileUrl:"",
          animalName:"",
          description:"",
          distributionRange:"",
          distributionStatus:"",
          characteristic:"",
        },
        xqobj: {},
        bigImgUrl: "",
        isBigImg: false
      }
    },
    mounted() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.getPage();
      this.getgetNumber();
    },
    methods: {
      getgetSpecimenInfo(id) {
        let _that = this;
        (async function f() {
          let res = await http.get(api.getSpecimenInfo + '?id=' + id)
          if (res.data.code == '200') {
            _that.Specimen = res.data.data;
          } else {
            _that.$message({
              type: 'warning',
              message: '获取物种信息失败!'
            });
          }
        })()
      },

      shanchu(data) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _that = this;
          (async function f() {
            let res = await http.delete(api.delete + '?id=' + data.id)
            if (res.data.code == '200') {
              _that.$message({
                type: 'success',
                message: '删除成功!'
              });
              _that.getPage();
            } else {
              _that.$message({
                type: 'warning',
                message: '删除失败!'
              });
            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      getgetNumber() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.getNumber, {
            areaId: _that.areaId,
            accomplish: 1
          })
          if (res.data.code == '200') {
            let arr = [];
            res.data.data.forEach(e => {
              let z = {
                value: e,
                label: e
              }
              arr.push(z)
            })

            _that.numberList = arr;
          }

        })()
      },
      openform(n, data) {
        this.isform = true;
        let _that = this;
        this.xqobj = Object.assign({}, data);
        this.address = data.lon + ',' + data.lat;
        this.value = data.sampleId;
        if (this.value !== '') {
          this.getgetSpecimenInfo(this.value);
        }
        setTimeout(function () {
          _that.creationMap(data.address, data.lon, data.lat)
        }, 500);
      },
      chooseTime(data) {
        if (data != null) {
          let year = data.getFullYear();
          let month = (data.getMonth() + 1) > 10 ? (data.getMonth() + 1) : "0" + (data.getMonth() + 1);
          let day = data.getDate() > 10 ? data.getDate() : "0" + data.getDate();
          this.startDate = year + '-' + month + '-' + day;
          this.endDate = year + '-' + month + '-' + day;
          console.log(year + '-' + month + '-' + day);
        } else {
          this.startDate = '';
          this.endDate = ''
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.getPage()

      },
      getPage() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.page, {
            areaId: _that.areaId,
            startDate: _that.startDate,
            endDate: _that.endDate,
            level: _that.level,
            keyword: _that.keyword,
            serialNumber: _that.serialNumber,
            accomplish: 1,
            pageSize: 12,
            pageNum: _that.pageNum
          })

          if (res.data.code == '200') {
            _that.pageList = res.data.data.content;
            _that.totalElements = res.data.data.totalElements;
          }

        })()
      },
      closeform() {
        this.isform = false;
        for (let k in this.ruleForm) {
          this.ruleForm[k] = ''
        }
        this.address = "";
        this.addressList = [];
        this.keywords = '';
        this.previewList = [];
        this.citizenPhoto = [];
        this.jiuzhuguocheng = [];
        this.value = ''
      },
      creationMap(data, lon, lat) {
        let map = new AMap.Map('container', {
          zoom: 18,//级别
          center: [lon, lat],//中心点坐标
          viewMode: '3D'//使用3D视图
        });

        let marker = new AMap.Marker({
          position: new AMap.LngLat(lon, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: data
        });
        map.add(marker);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.getPage();
      }
    },
  }
</script>

<style scoped>
  @import "../../static/css/inhand.css";
</style>
